<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时光邮局 - 给未来的自己写信</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .letter-animation {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .timeline-dot {
            animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
            100% { opacity: 1; transform: scale(1); }
        }
        .serif-title {
            font-family: 'Noto Serif SC', serif;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-24 px-6">
        <div class="max-w-6xl mx-auto text-center">
            <div class="letter-animation inline-block mb-8">
                <i class="fas fa-envelope-open-text text-6xl opacity-90"></i>
            </div>
            <h1 class="serif-title text-5xl md:text-7xl font-bold mb-6 tracking-wide">时光邮局</h1>
            <p class="text-xl md:text-2xl font-light mb-8 opacity-90">给未来的自己写一封信</p>
            <div class="max-w-3xl mx-auto">
                <p class="text-lg leading-relaxed opacity-80">
                    在时间的长河中，留下此刻的印记。让文字穿越时空，在未来的某个清晨，与另一个自己相遇。
                </p>
            </div>
            <a href="https://www.hi2future.com/" target="_blank" class="inline-flex items-center mt-10 bg-white text-purple-700 px-8 py-4 rounded-full font-medium hover:bg-opacity-90 transition-all duration-300 shadow-lg">
                <i class="fas fa-paper-plane mr-3"></i>
                开始写信
            </a>
        </div>
    </section>

    <!-- Main Content -->
    <section class="py-20 px-6">
        <div class="max-w-6xl mx-auto">
            <!-- Introduction -->
            <div class="bg-white rounded-3xl shadow-xl p-10 md:p-16 mb-16">
                <div class="max-w-4xl mx-auto">
                    <h2 class="serif-title text-3xl md:text-4xl font-bold text-gray-800 mb-8 text-center">
                        <i class="fas fa-clock text-purple-600 mr-3"></i>
                        时光的信使
                    </h2>
                    <p class="drop-cap text-lg leading-relaxed text-gray-700">
                        时光邮局是一个为用户提供给未来自己写信的平台，强调通过书写来传递情感和鼓励。时光邮局允许用户通过网络平台选择日期，撰写一份信件，然后在未来的指定日期自动递送这封信给自己。该平台的目的是鼓励人们记录当下的情感和想法，并在未来某个时间点回顾。服务的特色在于信件会在预定的时间点发送给用户，成为一种记录和反思自己的独特方式。
                    </p>
                </div>
            </div>

            <!-- Features Grid -->
            <div class="grid md:grid-cols-3 gap-8 mb-16">
                <div class="card-hover bg-white rounded-2xl shadow-lg p-8">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-hourglass-half text-2xl text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4">时间胶囊</h3>
                    <p class="text-gray-600 leading-relaxed">
                        通过书写信件给未来的自己，人们可以记录当前的感受和经历，留下时间胶囊。每一封信都是一个时间节点的情感快照。
                    </p>
                </div>

                <div class="card-hover bg-white rounded-2xl shadow-lg p-8">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-bullseye text-2xl text-blue-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4">目标规划</h3>
                    <p class="text-gray-600 leading-relaxed">
                        这种方式帮助人们设定长远目标，通过将来回顾过去的自己，增强对未来的期待和规划，让梦想有迹可循。
                    </p>
                </div>

                <div class="card-hover bg-white rounded-2xl shadow-lg p-8">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-seedling text-2xl text-green-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4">成长反思</h3>
                    <p class="text-gray-600 leading-relaxed">
                        时光邮局提供了一个独特的时间管理工具，通过书写和回顾，辅助个人成长和反思，见证自己的蜕变。
                    </p>
                </div>
            </div>

            <!-- Process Visualization -->
            <div class="bg-gradient-to-br from-purple-50 to-blue-50 rounded-3xl p-10 md:p-16 mb-16">
                <h2 class="serif-title text-3xl md:text-4xl font-bold text-gray-800 mb-12 text-center">
                    <i class="fas fa-route text-purple-600 mr-3"></i>
                    时光之旅
                </h2>
                <div class="mermaid text-center">
                    graph LR
                        A[<i class='fas fa-pen'></i> 撰写信件] -->|选择日期| B[<i class='fas fa-calendar-alt'></i> 设定时间]
                        B -->|等待时光流逝| C[<i class='fas fa-clock'></i> 时间胶囊]
                        C -->|到达预定时间| D[<i class='fas fa-envelope'></i> 收到信件]
                        D -->|阅读回顾| E[<i class='fas fa-heart'></i> 情感共鸣]
                        
                        style A fill:#667eea,stroke:#fff,stroke-width:3px,color:#fff
                        style B fill:#764ba2,stroke:#fff,stroke-width:3px,color:#fff
                        style C fill:#f093fb,stroke:#fff,stroke-width:3px,color:#fff
                        style D fill:#4facfe,stroke:#fff,stroke-width:3px,color:#fff
                        style E fill:#fa709a,stroke:#fff,stroke-width:3px,color:#fff
                </div>
            </div>

            <!-- Emotional Connection -->
            <div class="text-center mb-16">
                <div class="inline-flex items-center justify-center space-x-8">
                    <div class="text-center">
                        <div class="timeline-dot w-4 h-4 bg-purple-600 rounded-full mx-auto mb-2"></div>
                        <p class="text-sm text-gray-600">现在</p>
                    </div>
                    <div class="w-32 h-1 bg-gradient-to-r from-purple-600 to-blue-600"></div>
                    <div class="text-center">
                        <div class="timeline-dot w-4 h-4 bg-blue-600 rounded-full mx-auto mb-2"></div>
                        <p class="text-sm text-gray-600">未来</p>
                    </div>
                </div>
            </div>

            <!-- Call to Action -->
            <div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-3xl p-12 text-center text-white">
                <h2 class="serif-title text-3xl md:text-4xl font-bold mb-6">开启你的时光之旅</h2>
                <p class="text-xl mb-8 opacity-90">让每一个今天，都成为未来珍贵的回忆</p>
                <a href="https://www.hi2future.com/" target="_blank" class="inline-flex items-center bg-white text-purple-700 px-10 py-4 rounded-full font-medium hover:shadow-xl transition-all duration-300">
                    <i class="fas fa-feather-alt mr-3"></i>
                    立即写信
                </a>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({ 
            startOnLoad: true,
            theme: 'base',
            themeVariables: {
                primaryColor: '#667eea',
                primaryTextColor: '#fff',
                primaryBorderColor: '#fff',
                lineColor: '#5a67d8',
                secondaryColor: '#764ba2',
                tertiaryColor: '#f093fb'
            }
        });
    </script>
</body>
</html>